<template>
  <div>
    <van-nav-bar title="支付结果" />
    <van-loading v-show="loading" size="24px">订单处理中</van-loading>

    <van-cell-group v-show="paySuccess">
      <van-cell title="订单号" :value="payResultVo.orderNo" />
      <van-cell title="实际支付金额" :value="formatPrice(payResultVo.actualPay)" />
    </van-cell-group>
  </div>
</template>

<script>
import { Loading, Cell, CellGroup, Dialog, NavBar } from "vant";
import { apiPayResultVo } from "@/api/order";
export default {
  components: {
    [Loading.name]: Loading,
    [Dialog.Component.name]: Dialog.Component,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [NavBar.name]: NavBar
  },
  data() {
    return {
      loading: true,
      paySuccess: false,
      payResultVo: {
        orderNo: null,
        actualPay: null
      },
      requestCount: 0,
      t1: null
    };
  },
  methods: {
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },
    getPayResultVo(orderNo) {
      apiPayResultVo({ orderNo: orderNo }).then(res => {
        if (res.status === 2) {
          this.payResultVo = res;
          this.loading = false;
          this.paySuccess = true;
        } else {
          this.requestCount++;
          if (this.requestCount > 10) {
            this.loading = false;
            window.clearInterval(this.t1); //去掉定时器
            Dialog.alert({
              title: "温馨提示",
              message: "订单异常,请联系客服"
            }).then(() => {
              // on close
            });
          }
        }
      });
    }
  },
  created() {
    this.orderNo = this.$route.query.orderNo;
    if (this.orderNo) {
      console.log(this.orderNo);
      this.t1 = setInterval(() => {
        this.getPayResultVo(this.orderNo);
      }, 1000);
    } else {
      this.loading = false;
      Dialog.alert({
        title: "温馨提示",
        message: "订单异常,请联系客服"
      }).then(() => {
        // on close
      });
    }
  }
};
</script>